<template lang="">
    <div class="container">
        <div class="title">新建问卷</div>
        <div class="base-shadow main-box new-Ques">
            <div>
                <div class="newQues-outer text-center">
                    <div class="title newQues-title">创建空白问卷</div>
                    <el-input v-model="quesName" placeholder="请输入问卷名" @keyup.enter.native="addQues"></el-input>
                    <div class="select-type">
                        <el-switch v-model="questionnaireType" active-text="普通问卷" inactive-text="评教问卷" :active-value="0"
                            :inactive-value="1">
                        </el-switch>
                    </div>
                </div>
                <el-button class="newQues-button" type="primary" round @click="addQues">点击新建一个问卷</el-button>
            </div>
        </div>
        <div class="title">待发布问卷</div>
        <div class="cards">
            <el-card class="box-card" v-for="item in unPublish" :key="unPublish.conId">
                <div slot="header" class="clearfix">
                    <span>{{item.conTitle}}</span>
                </div>
                <div class="action-buttons">
                    <el-button type="primary" icon="el-icon-edit" size="small" @click="edit(item.conId)">编辑
                    </el-button>
                    <el-button type="primary" icon="el-icon-s-promotion" size="small"
                        @click="toPublish(item.conId,item.conTitle,item.conDescribe)">发布</el-button>
                    <el-button type="primary" icon="el-icon-folder-delete" size="small"
                        @click="deleteQuestionnaire(item.conId)">删除</el-button>
                    <span class="text-info text-size-small card-date">创建日期:{{item.conDate}}</span>
                </div>
            </el-card>
        </div>
        <div class="more text-center">
            <el-button type="text" @click="more" v-show="hasNextPage">加载更多</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'NewQues',
        data() {
            return {
                quesName: '',
                isCreated: false,
                questionnaireType: 0,
                unPublish: [
                    /* {
                        "id": 4,
                        "conTitle": "测试1",
                        "conDescribe": "11",
                        "conDate": "2022-08-11",
                        "conPublish": 0,
                        "conOwner": 1001001,
                        "conId": 566663221
                    },
                    {
                        "id": 5,
                        "conTitle": "测试2",
                        "conDescribe": "测试",
                        "conDate": "2022-08-11",
                        "conPublish": 0,
                        "conOwner": 1001001,
                        "conId": 781754212
                    },
                    {
                        "id": 6,
                        "conTitle": "测试",
                        "conDescribe": "测试233",
                        "conDate": "2022-08-11",
                        "conPublish": 0,
                        "conOwner": 1001001,
                        "conId": 1
                    } */
                ],
                moreNum: 8,
                hasNextPage: false
            }
        },
        methods: {
            addQues() {
                console.log({ conTitle: this.quesName });
                if (this.quesName == '') {
                    this.$message({
                        message: '请填写问卷名',
                        type: 'warning'
                    });
                } else {
                    axios({
                        method: 'POST',
                        url: '/question/createQuestionnaire',
                        withCredentials: true,
                        data: JSON.stringify({
                            conTitle: this.quesName,
                            questionnaireType:this.questionnaireType
                        }),
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then((result) => {
                        this.$message({
                            message: `已为您创建问卷${this.quesName}`,
                            type: 'success'
                        });
                        this.quesName = ''
                        console.log('createQuestionnaire返回', result.data);
                        this.edit(result.data)
                    }).catch((err) => {
                        this.$message({
                            message: err.message,
                            type: 'info'
                        });
                    });
                }
            },
            isEmpty(value) {
                console.log(value);
                if (value == null) {
                    return true
                } else {
                    return false
                }
            },
            edit(conId) {
                this.$router.push({
                    name: 'edit',
                    query: {
                        conId
                    }
                })
            },
            deleteQuestionnaire(conId) {
                console.log('删除conId', conId);
                axios({
                    method: 'POST',
                    url: '/QuestionList/deleteQues',
                    withCredentials: true,
                    data: JSON.stringify(conId),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    if (result == 0) {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    } else {
                        this.$message({
                            message: `已删除问卷id:${conId}`,
                            type: 'success'
                        });
                        this.getUnPublish()
                    }
                }).catch((err) => {
                    this.$message({
                        message: '删除失败' + err.message,
                        type: 'info'
                    });
                });
            },
            getUnPublish() {
                console.log('moreNum', this.moreNum);
                axios({
                    method: 'GET',
                    url: '/QuestionList/queryQuesPub/1',
                    withCredentials: true,
                    params: {
                        conPublish: 0,
                        pageSize: this.moreNum
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    this.unPublish = result.data.list
                    console.log(result.data);
                    this.hasNextPage = result.data.hasNextPage
                }).catch((err) => {

                });
            },
            toPublish(conId, conTitle, conDescribe) {
                console.log(conId, conTitle, conDescribe);
                this.$router.push({
                    name: 'publish',
                    query: {
                        conId,
                        conTitle,
                        conDescribe
                    }
                })
            },
            more() {
                this.moreNum = this.moreNum + 8
                this.getUnPublish()
            }
        },
        mounted() {
            this.getUnPublish()
        },
    }
</script>
<style scoped>
    .el-input {
        width: 500px;
    }

    .newQues-button {
        margin: 40px 0px 50px 50%;
        transform: translate(-50%);
    }

    .newQues-title {
        margin-top: 20px;
    }

    .newQues-outer {
        overflow: hidden;
    }

    .box-card {
        width: 480px;
        margin: 10px;
    }

    .new-Ques {
        margin-bottom: 10px;
    }

    .cards {
        display: flex;
        flex-wrap: wrap;
    }

    .card-date {
        padding-left: 80px;
    }

    .select-type{
        margin-top: 20px;
    }
</style>